<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HLS 直播播放</title>
    <style>
      body {
        background-color: #111;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        color: white;
        font-family: Arial, sans-serif;
      }
      video {
        width: 80%;
        max-width: 800px;
        border: 2px solid #555;
        border-radius: 12px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <h2>HLS 直播播放</h2>
    <video id="video" controls autoplay muted></video>

    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script>
      const video = document.getElementById("video");
      // const videoSrc = "http://localhost:8000/live/stream/index.m3u8";
      const videoSrc = "https://www.wyj1999.xyz:8443/live/stream/index.m3u8";
      if (Hls.isSupported()) {
        const hls = new Hls({
          liveSyncDuration: 10, // 播放点延迟直播10秒（越大越稳）
          liveMaxLatencyDuration: 30, // 最大允许落后30秒（避免自动 seek）
          maxBufferLength: 60, // 最大缓冲 60 秒
          maxMaxBufferLength: 120, // 可动态扩展到 120 秒
          enableWorker: true,
        });
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.ERROR, (event, data) => {
          console.error("HLS error:", data);
        });
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        // iOS Safari 原生支持 HLS
        video.src = videoSrc;
      } else {
        alert("你的浏览器不支持 HLS 播放");
      }
    </script>
  </body>
</html>
